<!-- 屈光发育档案/检查信息管理(影像采集) -->
<template>
  <div class="mod-config">
      <el-divider content-position="left">影像采集</el-divider>
      <div>
        <el-form :disabled="formType == 'check'">
          <el-form-item label="影像类型" label-width="80px">
            <el-select v-model="dataForm.imageType">
              <el-option v-for="item in docTypeOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述文本" label-width="80px">
            <el-input type="textarea" v-model="dataForm.memo"></el-input>
          </el-form-item>
          <el-form-item label="上传文件" label-width="80px">
            <el-upload
              action="/pvm/arcImage/uploadFileByOptometry"
              ref="uploadImg"
              drag
              list-type="picture-card"
              :headers="headers"
              :on-change="(file,fileList) => {uploadChangeHandle(file,fileList)}"
              :before-upload="beforeUpload"
              :on-success="handleSuccess"
              :on-error="handleError"
              :file-list="fileList"
              :data="{docId: dataForm.docId}"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url" alt=""
                  >
                  <!-- <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handlePictureCard(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span> -->
                </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
			<el-divider content-position="left">影像列表</el-divider>
			<ul class="el-upload-list el-upload-list--picture-card">
			  <li v-for="item in imgList" tabindex="0" class="el-upload-list__item is-ready" style="border-radius: 0;">
			    <div style="text-align: center;">{{item.imageType}}</div>
			    <div>
			      <img :src="item.src" alt="" class="el-upload-list__item-thumbnail" style="max-width: 150px;max-height: 300px;">
			      <span class="el-upload-list__item-actions">
			        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(item)">
			          <i class="el-icon-zoom-in"></i>
			        </span>
			        <span class="el-upload-list__item-delete" @click="handlePictureCard(item)">
			          <i class="el-icon-delete"></i>
			        </span>
			      </span>
			    </div>
			  </li>
			</ul>
      <duo-image-viewer
        :list="srcList"
        @open="openCallback"
        @close="closeCallback"
        :show.sync="showViewer"
        :currentIndex="currentIndex"
      />
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
      </span> -->
  </div>
</template>

<script>
  import { filterParams } from '@/util/tools'
  // import TableForm from './checkdata-form'
  import { delPictureByFileName,getArgImagelstByDocId,getImage } from '@/api/pvm/imageCollect'
  import { mapGetters } from 'vuex'
  import { remote } from '@/api/admin/dict'
  import store from '@/store'


  export default {
    props: ['studentId'],
    data() {
      return {
        formType: '',
        docTypeOptions: [],
        headers: {
          'Authorization': 'Bearer ' + store.getters.access_token,
        },
        fileList: [],
				imgList: [],
        docId: '',
        dataForm: {
          docId: '',
          imageType: '',
          memo: ''
        },
        imgData: {

        },
        currentIndex: 0,
        srcList: [],
        showViewer: false,
        disabled: false
      }
    },
    components: {
    },
    computed: {
      ...mapGetters(['permissions'])
    },
    methods: {
      init(formType,id,docId){
        this.formType = formType
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
        this.dataForm.id = id || ''
        this.dataForm.docId = docId
        remote('doc_type').then(response => {
          this.docTypeOptions = response.data.data
        })
        if(this.dataForm.id){
          this.getImgList()
        }
      },
      getImgList(){
        this.srcList = []
        getArgImagelstByDocId(this.dataForm.docId).then(response => {
          if(response.data.code == '0'){
            let dat = response.data;
            this.imgList = response.data.data
            for (let i = 0; i < this.imgList.length; i++) {
              this.imgData.type = '测试';
              this.imgList[i].src=this.imgList[i].path
              this.srcList.push(this.imgList[i].path)
            }
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      // 图片上传之前
      beforeUpload(file){
      },
      // 图片上传成功
      handleSuccess(res, file){
        this.$message.success('上传成功')
        this.getImgList()
        this.$nextTick(() => {
          this.$refs.uploadImg.clearFiles()
        })
      },
      // 图片上传失败
      handleError(res, file){
      },
      uploadChangeHandle(file,fileList){
        this.fileList = fileList
      },
      //  文件状态改变；添加文件&上传成功&上传失败调用
      handleRemove(file) {
        this.fileList.forEach((item,index) => {
          if(item.uid == file.uid){
            this.fileList.splice(index,1)
          }
        })
      },
      // 删除影像列表
      handlePictureCard(item){
        this.$confirm('是否删除影像信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            return delPictureByFileName(item.fileName)
        }).then(response => {
          if(response.data.code == '0'){
            this.$message.success('删除成功')
            this.srcList.forEach((src,index) => {
              if(src == item.path){
                this.srcList.splice(index,1)
              }
            })
            this.fileList.forEach((itemFile,index) => {
              if(itemFile.uid == item.uid){
                this.fileList.splice(index,1)
              }
            })
            this.getImgList()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      handlePictureCardPreview(file) {
        if (file) {
          this.srcList.forEach((item,index) => {
            if(item == file.path){
              this.currentIndex = index
            }
          })
        }
        this.showViewer = true

      },
      handleUpload(){
        console.log(this.fileList)
      },
      openCallback(){
        console.log(this.fileList)
      },
      closeCallback(){
        this.showViewer = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-col {
    margin-bottom: 0 !important;
  }
  /deep/ .el-upload--picture-card {
    border: none;
  }
  /deep/ .el-upload-dragger {
    width: 150px;
    height: 150px;
    border: none;
    box-sizing: border-box;
  }
  .avue-upload__avatar, .avue-upload__icon, .el-upload--picture-card, .el-upload-list--picture-card .el-upload-list__item {
    line-height: 25px!important;
  }
  .miui-table {
    width: 100%;
    margin: 10px 0;
    background-color: #b1e2ec3b;
    tr th {
      background-color: #f4f5f7;
    }

    tr th, tr td {
      padding: 10px 8px;
      border: solid 1px #fff;
      text-align: center;
    }
    .miui-table-header td{
      background-color: #7898a8;
      color: #fff;
    }
    .miui-table-tbody{
      background-color: #cadee8;
    }
    .miui-table-label {
      width: 120px;
      background-color: #b2d5f6;
    }
  }
</style>
